<template>
  <div ref="imageWrapper">
    <a-row :gutter="24" :class="{ 'model-body': true }">
      <a-col :md="5" :sm="24" style="height: calc(100vh - 250px)">
        <a-card class="card-radius" style="overflow-x: scroll; margin: 0">
          <template slot="title">
            <span style="color: #2e4cba">分类选择</span>
          </template>
          <a-spin size="large" class="card-item-loding1" :spinning="loading1" v-show="loading1" />
          <SideMenuOnPage :disabled="finishFlag" :menuitem="reportList" @menuItenId="queryParam.id = $event" />
        </a-card>
      </a-col>
      <a-col :md="19" :sm="24" style="height: calc(100vh - 250px)">
        <a-card
          style="margin: 0"
          :class="{ 'card-radius': true, 'trainsition-body': componentId === 'TransitionList' }"
        >
          <div slot="title" style="display: flex; flex: 1">
            <div style="width: 56%; position: relative">
              审计模型选择：
              <a-progress
                style="top: -2px"
                :stroke-color="{
                  '0%': '#108ee9',
                  '100%': '#87d068',
                }"
                :percent="percent"
              />
              <span style="position: absolute; top: 20px; left: 115px; color: #2e4cba">
                已完成{{ off }}个模型，剩余{{ all - off }}个模型分析，共计{{ all }}个模型，完成率{{ percent }}%
                <span v-show="finish != 1">，预计完成时间</span>
              </span>
            </div>
            <div style="width: 45%; text-align: right">
              <!-- v-show="" -->
              <a-button
                v-show="componentId === 'TransitionList' && finishFlag"
                class="clear_btn"
                style="margin-left: 10px"
                @click="transitionCom('TransitionModel')"
                >审计模型查看</a-button
              >
              <a-button
                v-show="componentId === 'TransitionModel' && finishFlag"
                class="clear_btn"
                style="margin-left: 10px"
                @click="transitionCom('TransitionList')"
                >审计底稿查看</a-button
              >
              <a-button type="primary" style="margin-left: 18px" @click="backUppage"> 返回 </a-button>
            </div>
          </div>
          <a-spin size="large" class="card-item-loding" :spinning="loading" v-show="loading" />
          <component
            :is="componentId"
            :finish-flag="finishFlag"
            :id="resultPage.id"
            :queryParamId="queryParam.id"
            :dataSource="tableSource"
            @checkAnalysisIndex="checkAnalysisIndex"
            @checkQuestionPapers="checkQuestionPapers"
          ></component>
        </a-card>
      </a-col>
    </a-row>
    <AnalysisIndex ref="AnalysisIndex" />
    <QuestionPapers ref="QuestionPapers">
      <!-- <template v-if="boxTitlename == '分包准入管理'" v-slot:AuditSummaryQuestions="dataItem">
        <p class="quesition-context"><span class="title">问题描述：</span>{{ dataItem.wtms }}</p>
        <p class="quesition-context"><span class="title">审计结论：</span>{{ dataItem.dingxing }}</p>
        <p class="quesition-context"><span class="title">规章制度：</span>{{ dataItem.gzzd }}</p>
        <p class="quesition-context"><span class="title">审计意见或建议：</span>{{ dataItem.xgjy }}</p>
      </template>
      <template v-else v-slot:AuditSummaryQuestions="dataItem">
        <p class="quesition-context"><span class="title">疑点描述：</span>{{ dataItem.wtms }}</p>
        <p class="quesition-context"><span class="title">判断依据：</span>{{ dataItem.gzzd }}</p>
        <p class="quesition-context"><span class="title">相关建议：</span>{{ dataItem.xgjy }}</p>
      </template> -->
    </QuestionPapers>
  </div>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import TransitionList from './transitionList.vue'
import TransitionModel from './transitionModel.vue'
import AnalysisIndex from '../CheckModel'
import QuestionPapers from '../CheckModel/QuestionPapers.vue'
import SideMenuOnPage from '../SideMenuOnPage'
export default {
  name: 'DraftProduceResults',
  mixins: [JeecgListMixin],
  components: { TransitionList, TransitionModel, AnalysisIndex, QuestionPapers, SideMenuOnPage },
  data() {
    return {
      visible: false,
      disableMixinCreated: true,
      reportList: [],
      tableSource: [],
      componentId: 'TransitionModel',
      superQueryParams: {},
      queryParam: {
        id: 0,
      },
      loading: false,
      loading1: false,
      url: {
        detailBox: '/sjmx/queryDataModel',
        ResultTable: '/sjmx/quickDraftResult/queryResultByQuickId',
        ResultList: '/sjmx/quickDraftResult/queryResultListByQuickId',
        MxStatusById: '/sjmx/queryMxStatusById',
        queryModelField: '/sjmx/sjModelFieldConfig/queryModelField',
        queryQuestionDraft: '/sjmx/quickDraftResult/queryQuestionDraft',
      },
      timer: null,
      all: 0,
      off: 0,
      finish: null,
      finishFlag: false,
      //用来区分 审计事项摘要显示什么
      boxTitlename: '',
    }
  },
  props: {
    resultPage: {
      type: Object,
      default: {},
      required: true,
    },
    returnRouterPage: {
      type: Boolean,
      default: false,
    },
    returnRecord: {
      type: Object,
      default: {},
    },
  },
  watch: {
    'queryParam.id'(val) {
      if (this.componentId == 'TransitionModel') this.getResultData(this.resultPage.id, this.url.ResultTable, val)
    },
    finishFlag(val) {
      if (val) {
        this.getResultData(this.resultPage.id, this.url.ResultTable, 0)
      }
    },
  },
  computed: {
    percent() {
      if (this.all && this.off) return Math.floor((this.off / this.all) * 100)
      else return 0
    },
  },
  mounted() {
    // 生成左侧菜单
    this.loading1 = true
    this.getReportList()
    this.loading = true
    this.finishFlag = false
    let { progressText, progressStatus } = this.resultPage
    if (progressStatus != 2) {
      // 启动定时器
      this.timer = setInterval(() => {
        this.getMxStatusById(this.resultPage.id)
      }, 5000)
    } else {
      let RecordReslut = JSON.parse(progressText)
      this.all = RecordReslut.all
      this.off = RecordReslut.off
      this.finish = RecordReslut.finish
      this.finishFlag = true
      // this.getResultData(this.resultPage.id, this.url.ResultTable, 0)
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
    this.time = null
  },
  methods: {
    getResultData(id, url, modelId) {
      this.tableSource = []
      getAction(url, { id, modelId }).then((res) => {
        if (res.success) {
          this.tableSource = res.result
        }
        this.loading = false
      })
    },
    getReportList() {
      getAction(this.url.detailBox).then((res) => {
        if (res.success && res.result.length > 0) {
          this.reportList = res.result
        } else {
          console.log(res)
        }
        this.loading1 = false
      })
    },
    getMxStatusById(val) {
      this.finishFlag = false
      getAction(this.url.MxStatusById, { id: val }).then((res) => {
        if (res == '') {
          clearInterval(this.timer)
          this.loading = false
          this.finishFlag = true
        }
        if (res.success) {
          let { all, off, list, finish } = res.result
          this.all = all
          this.off = off
          this.tableSource = list
          this.finish = finish
          if (finish == 1) {
            this.finishFlag = true
            console.log('this.finishFlag----->', this.finishFlag)
            clearInterval(this.timer)
            this.loading = false
          }
        }
      })
    },
    handleCheck(record) {
      this.visible = true
    },
    close() {
      this.visible = false
    },
    checkAnalysisIndex(modelId) {
      getAction(this.url.queryModelField, { modelId }).then((res) => {
        if (res.success) {
          if (res.result) {
            let data = JSON.parse(res.result && res.result.projectJson)
            this.$refs.AnalysisIndex.check(data, modelId, res.result.modelType)
          } else {
            this.$message.warning('分析指标查询不存在')
          }
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    checkQuestionPapers(modelId, boxTitlename) {
      this.boxTitlename = boxTitlename
      getAction(this.url.queryQuestionDraft, { id: this.resultPage.id, modelId }).then((res) => {
        if (res.success) {
          this.$refs.QuestionPapers.check(res.result, modelId, boxTitlename)
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    backUppage() {
      // 如果不是路由调过来的，就是普通的返回
      if (!this.returnRouterPage) {
        this.$emit('BackFristPage')
      } else {
        // 返回对应的路由页
        this.$router.push({
          path: '/sjxmzygl/sjxmss',
          query: {
            record: this.returnRecord,
            // 返回调转到审计底稿
            activeKey: 'sssj',
            activeValue: '审计分工',
            activeMenu: 'sjdg',
          },
        })
      }
    },
    handleDataCheck(record) {
      this.$refs.modalForm.edit(Object.assign(record, { reportCategoryId: this.queryParam.reportCategoryId }))
    },
    transitionCom(Comid) {
      this.componentId = Comid
      if (Comid == 'TransitionModel') this.getResultData(this.resultPage.id, this.url.ResultTable)
      // else {
      //   this.getResultData(this.resultPage.id, this.url.ResultList)
      // }
    },
  },
}
</script>

<style lang="less" scoped>
@import '~@assets/less/tableTheme.less';
.ant-table-fixed-left .ant-table-thead > tr > th:last-child {
  border-top-right-radius: 0;
  background-color: red;
  padding: 0;
}
.model-body {
  /deep/ .ant-card-body {
    padding: 0px 20px;
    position: relative;
    height: calc(100vh - 220px);
    .card-item-loding {
      position: absolute;
      top: 45%;
      left: 48%;
    }
  }
  /deep/ .ant-input-group {
    /deep/ .ant-input-group-addon {
      /deep/ .ant-btn-primary {
        background-color: #fff;
        border-color: #fff;
      }
    }
  }
  .dataCol-menu {
    height: 630px;
    /deep/ .ant-menu-item {
      margin-top: 0px;
      margin-bottom: 0px;
      border-bottom: 1px solid #d9d9d9;
    }
    /deep/ .ant-menu-item-selected {
      color: #ef9325;
      background-color: #fff !important;
      box-shadow: 0px 0px 5px #ef9325;
    }
  }

  .card-item-content {
    width: 100%;
    display: flex;
    flex-direction: row;
    //   justify-content: space-around;
    flex-wrap: wrap;
    overflow: hidden;
  }
}
.card-radius {
  position: relative;
  .card-item-loding1 {
    position: absolute;
    top: 45%;
    left: 48%;
  }
}

.trainsition-body {
  /deep/ .ant-card-body {
    padding: 0px;
  }
}
.title {
  color: black;
  font-weight: 700;
}
.quesition-context {
  margin: 10px 0px 0px 0px;
  padding: 0;
  text-indent: 2em;
}
</style>